<template>
  <div class="element-filter">
    <div class="row">
      <div class="row-title" style="flex: 2;">启用滤镜：</div>
      <div class="switch-wrapper" style="flex: 3;">
        <Switch :checked="hasFilters" @change="checked => toggleFilters(checked)" />
      </div>
    </div>
    <div v-if="hasFilters">
      <div class="filter" v-if="handleElement.type=='image'">
        <div class="filter-item" :class="{'on': currentIndex == index}" @click="updateFilter2(filters,index)" v-for="(filters, index) in filterOptions2" :key="index" >
          <dd v-if="handleElement.src"><img :src='handleElement.src' alt="" :data-id="`${arrStyle[index]}`" :style="{filter: arrStyle[index]}"></dd>
          <dd v-else><img :src='require("/public/default.png")' alt="" :data-id="`${arrStyle[index]}`" :style="{filter: arrStyle[index]}"></dd>
        </div>
      </div>
      <div class="filter2">
        <div class="filter-item" v-for="(filter, index) in filterOptions" :key="filter.key" >
          <div class="name row-title">{{ filter.label }}</div>
           <Slider class="filter-slider" :max="filter.max" :step="filter.step" :value="filter.value"
          @change="value => updateFilter(filter, value)" />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, ref, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { useMainStore, useSlidesStore } from '@/store'
import { PPTImageElement } from '@/types/slides'
import useHistorySnapshot from '@/hooks/useHistorySnapshot'
import useFilter from '@/views/components/element/ImageElement/useFilter'

interface FilterOption {
  label: string;
  key: string;
  default: number;
  value: number;
  unit: string;
  max: number;
  step: number;
}

const defaultFilters: FilterOption[] = [
  { label: '模糊', key: 'blur', default: 0, value: 0, unit: 'px', max: 10, step: 1 },
  { label: '亮度', key: 'brightness', default: 100, value: 100, unit: '%', max: 200, step: 5 },
  { label: '对比度', key: 'contrast', default: 100, value: 100, unit: '%', max: 200, step: 5 },
  { label: '灰度', key: 'grayscale', default: 0, value: 0, unit: '%', max: 100, step: 5 },
  { label: '饱和度', key: 'saturate', default: 100, value: 100, unit: '%', max: 200, step: 5 },
  { label: '色相', key: 'hue-rotate', default: 0, value: 0, unit: 'deg', max: 360, step: 10 },
  { label: '透明度', key: 'opacity', default: 100, value: 100, unit: '%', max: 100, step: 5 },
]

const defaultFilters2: any = [
  {
    "brightness": "135%",
    "contrast": "100%",
    "saturate": "120%",
    "hue-rotate": "0deg",
    "opacity": "90%",
    "grayscale": "30%"
  },
  {
    "hue-rotate": "0deg",
    "brightness": "135%",
    "contrast": "90%",
    "grayscale": "0%",
    "saturate": "125%",
    "opacity": "90%"
  },
  {
    "grayscale": "0%",
    "contrast": "105%",
    "brightness": "100%",
    "saturate": "140%",
    "hue-rotate": "0deg"
  },
  {
    "brightness": "115%",
    "blur": "3px",
    "contrast": "105%",
    "grayscale": "0%",
    "saturate": "100%",
    "hue-rotate": "0deg",
    "opacity": "80%"
  },
  {
    "blur": "0px",
    "brightness": "85%",
    "contrast": "90%",
    "grayscale": "100%"
  }
]

export default defineComponent({
  name: 'element-filter',
  setup() {
    const slidesStore = useSlidesStore()
    const { handleElement, handleElementId } = storeToRefs(useMainStore())
    const currentFilter = ref({ label: '模糊', key: 'blur', default: 0, value: 0, unit: 'px', max: 10, step: 1 })
    const currentIndex = ref(0)
    const filterOptions = ref<FilterOption[]>(JSON.parse(JSON.stringify(defaultFilters)))
    const filterOptions2 = ref(defaultFilters2)
    const hasFilters = ref(false)
    const { addHistorySnapshot } = useHistorySnapshot()

    const arrStyle: any = ref([])
    onMounted(() => {
      
      filterOptions2.value.map((item: any) => {
         const value = computed(() => item)
         const { filter } = useFilter(value)
         arrStyle.value.push(filter.value)
      })
    })
    watch(handleElement, () => {
      if (!handleElement.value || (handleElement.value.type !== 'image' && handleElement.value.type !== 'chart')) return

      const filters = handleElement.value.filters
      if (filters) {
        filterOptions.value = defaultFilters.map(item => {
          if (filters[item.key] !== undefined) {
            item.key == currentFilter.value.key ? currentFilter.value = { ...item, value: parseInt(filters[item.key]) } : ''
            return { ...item, value: parseInt(filters[item.key]) }
          }else {
            return item
          }
          
        })
        hasFilters.value = true
        // currentFilter.value = filterOptions.value[0]
      }
      else {
        filterOptions.value = JSON.parse(JSON.stringify(defaultFilters))
        hasFilters.value = false
      }
    }, { deep: true, immediate: true })
    const handleClickItem = (index: number) => {
      currentFilter.value = filterOptions.value[index]
    }
    // 设置滤镜
    const updateFilter = (filter: FilterOption, value: number) => {
      const _handleElement = handleElement.value as PPTImageElement

      const originFilters = _handleElement.filters || {}
      const filters = { ...originFilters, [filter.key]: `${value}${filter.unit}` }
      slidesStore.updateElement({ id: handleElementId.value, props: { filters } })
      addHistorySnapshot()
    }
    // 设置滤镜
    const updateFilter2 = (filters: any, index: number) => {
      currentIndex.value = index
      slidesStore.updateElement({ id: handleElementId.value, props: { filters } })
      addHistorySnapshot()
    }

    const toggleFilters = (checked: boolean) => {
      console.log(handleElement.value,'handleElement.value',checked)
      if (!handleElement.value) return
      if (checked) {
        slidesStore.updateElement({ id: handleElement.value.id, props: { filters: {} } })
      }
      else {
        slidesStore.removeElementProps({ id: handleElement.value.id, propName: 'filters' })
      }
      addHistorySnapshot()
    }

    return {
      filterOptions,
      filterOptions2,
      hasFilters,
      toggleFilters,
      updateFilter,
      currentFilter,
      currentIndex,
      handleClickItem,
      updateFilter2,
      arrStyle,
      handleElement,
    }
  },
})
</script>

<style lang="scss" scoped>
.row {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 22px;
}

.switch-wrapper {
  text-align: right;
}

.filter {
  font-size: 12px;
  display: flex;
}
.filter2 {
  .filter-item {
    display: flex;
  }
}
.filter-item {
  padding: 10px 5px;
  cursor: pointer;
  flex: 1;
  transition: .5s all ease;
  &.on {
    transform: scale(1.2);
    img {
      border: 1px solid $textH2Color;
    }
  }
  img {
    width: 100%;
    height: 50px;
    object-fit: cover;
    border-radius: 8px;
  }
  .name {
    width: 40px;
    font-size: 12px;
  }

  .filter-slider {
    flex: 1;
    margin: 0 6px;
  }
}
</style>